<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/vue.min.js"></script>
    <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
    <title>教务管理系统</title>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">教务管理系统</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">教务管理系统</a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#">教师管理</a></li>
                    <li><a href="students.html">学生管理</a></li>
                    <li><a href="lessons.html">选课管理</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container-fluid" id="teachers-table">
    <form class="form-inline col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 main">
        <button id="insertBtn" type="button" class="btn btn-primary col-sm-offset-1 col-md-offset-1" data-toggle="modal"
                data-target="#insertTeacher">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>添加
        </button>

        <div class="modal fade" id="insertTeacher" tabindex="-1" role="dialog" aria-labelledby="insertModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="insertModalLabel">添加教师数据</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <input type="text" class="form-control col-sm-offset-1 col-md-offset-1" placeholder="教师工号"
                                   v-model="insertTeacher.teacherNum">
                        </div>
                        <div class="row">
                            <input type="text" class="form-control col-sm-offset-1 col-md-offset-1" placeholder="姓名"
                                   v-model="insertTeacher.teacherName">
                        </div>

                        <ul class="sexUl">
                            <li v-for="sex in sexes" v-cloak @click.stop="insertChangeSex($event)"
                                :class="sex === insertTeacher.sex ? 'sex-selected' : ''">
                                {{ sex }}
                            </li>
                        </ul>

                        <div class="row">
                            <input type="text" class="form-control col-sm-offset-1 col-md-offset-1" placeholder="职称"
                                   v-model="insertTeacher.title">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="insertTeacherFunc">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="input-group col-sm-offset-6 col-md-offset-6">
            <input type="text" class="form-control" placeholder="教师工号" v-model="searchNum">
            <span class="input-group-btn">
                <button type="button" class="btn btn-primary" @click="searchTeacherFunc"><span
                        class="glyphicon glyphicon-search"
                        aria-hidden="true"></span>搜索</button>
            </span>
        </div>
    </form>

    <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 main">

            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>教师工号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>职称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="teacher in teachers" v-cloak>
                        <td v-text="teacher.teacherNum"></td>
                        <td v-text="teacher.teacherName"></td>
                        <td v-text="teacher.sex"></td>
                        <td v-text="teacher.title"></td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm" data-toggle="modal"
                                    data-target="#updateTeacher" @click="readyUpdate(teacher)">修改
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" @click="deleteTeacherFunc(teacher)">删除
                            </button>
                        </td>

                        <div class="modal fade" id="updateTeacher" tabindex="-1" role="dialog"
                             aria-labelledby="updateModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close"><span
                                                aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="updateModalLabel">修改教师数据</h4>
                                    </div>
                                    <div class="modal-body">
                                        <h4 v-cloak class="col-sm-offset-1 col-md-offset-1">教师工号:
                                            {{updateTeacher.teacherNum}}</h4>
                                        <div class="row">
                                            <input type="text" class="form-control col-sm-offset-1 col-md-offset-1"
                                                   placeholder="姓名"
                                                   v-model="updateTeacher.teacherName">
                                        </div>

                                        <ul class="sexUl">
                                            <li v-for="sex in sexes" v-cloak @click.stop="updateChangeSex($event)"
                                                :class="sex === updateTeacher.sex ? 'sex-selected' : ''">
                                                {{ sex }}
                                            </li>
                                        </ul>

                                        <div class="row">
                                            <input type="text" class="form-control col-sm-offset-1 col-md-offset-1"
                                                   placeholder="职称"
                                                   v-model="updateTeacher.title">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                        </button>
                                        <button type="button" class="btn btn-primary" @click="updateTeacherFunc">
                                            确定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </tr>
                    </tbody>
                </table>
            </div>

            <p class="text-danger"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>请注意：随意删除教师数据可能导致其所授课程数据的丢失！
            </p>

        </div>
    </div>
</div>

</body>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</html>